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“If you wish to move a mountain tomorrow, 
You must start by lifting stones today” 


“African Proverb“ 
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Prakata 


Selamat datang di dunia game development! 


Pada buku ini, akan diajarkan secara rinci teknik-teknik dasar yang sering 
digunakan dalam pembuatan game dengan Construct 2. Karena buku ini 
mengemas tutorial dasar, maka apa yang akan dibahas dalam buku ini tidak 
akan terlalu dalam, tetapi meluas. Semua game yang dibuat juga tidak akan 
terlalu spesifik ke genre maupun platform tertentu. Harapannya, setelah 
mempelajari buku ini, Anda dapat memperdalam lebih jauh pengetahuan 
yang didapatkan dari buku ini. 


Apa Saja yang Dibahas di Buku Ini? 


Bab 1 Getting Started 

Berisi panduan mengenai persiapan dan pengetahuan yang dibutuhkan sebe- 
lum menggunakan C2. 

Bab 2 Manual 


Berisi penjelasan teknis mengenai Construct 2. Penjelasan singkat mengenai 
interface, menu, serta behaviors. Selain itu juga dijelaskan cara penggu- 
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naan dari ekspresi logika yang digunakan. Penulis sangat merekomendasikan 
pembaca untuk membaca bab ini terlebih dahulu, karena dalam bab-bab 
berikutnya, penulis menganggap pembaca sudah memiliki pemahaman ten- 
tang penggunaan engine ini. 


Bab 3 Input & Player Control 


Berisi cara-cara untuk menggerakkan karakter yang dimainkan dari berbagai 
macam input, seperti keyboard, touch, dan mouse. 


Bab 4 Function, Dictionary, & Array 


Dalam subbab function (fungsi) akan dijelaskan teknik-teknik memanggil 
dan menggunakan fungsi, kemudian dalam subbab array akan diajarkan cara 
penggunaan array, meliputi pembuatan, pengaksesan indeks, serta manipu- 
lasinya. 


Bab 5 Animations, Image Points, Instance Variable, & Spawning Enemies 


Pada bab ini akan dijelaskan hal-hal yang berkaitan dengan karakter di dalam 
game, meliputi pembuatan animasi, pemberian variabel, serta cara instansi- 
asi karakter di dalam game. 


Bab 6 Camera 


Berisi penjelasan pemanfaatan system reference, yang membuat game se- 
olah-olah memiliki kamera yang memiliki kemampuan untuk mengikuti ke 
mana pun karakter berjalan, zoom in, zoom out, dan lain-lain. 


Bab 7 Al 


Berisi pemaparan tentang pembuatan Al (Artificial Intelligence atau kecerdas- 
an buatan) sederhana, untuk membuat musuh-musuh yang tampak “hidup”. 


Bab 8 Physics 


Bab ini akan secara spesifik membahas penggunaan physic behavior, untuk 
membuat game yang menerapkan fungsi dan prinsip fisika di dalamnya. 


Bab 9 Visual Effects 


Berisi tutorial tentang pembuatan efek-efek visual sederhana, yang akan 
membuat game lebih hidup dan menarik. 
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Bab 10 Highscore & Save Game 


Pada subbab highscore akan diajarkan cara pembuatan highscore dan offline 
leaderboard sederhana. Kemudian pada subbab save game, akan diajarkan 
cara pemanfaatan fitur save & load bawaan. 


Bab 11 Sound Effects 


Berisi cara pemasangan musik dan efek suara di dalam game. 


Bab 12 Finding Inspiration, Create, and Promote Your Game 


Dipaparkan beberapa cara studio game lokal dalam mencari inspirasi game 
yang mereka buat. 


Bab 13 Tips & Tricks 
Berisi tambahan-tambahan pengetahuan seputar C2, yaitu: 
e Fade in/out to another layout 
e  Continously scrolling background 
e Drag & drop 
e Button animations 
e Radar 
e  Pause 
e Advanced timer 


e Health bar 


Apa yang Perlu Diperhatikan Saat Membaca 
Buku Ini? 


Dalam buku ini, terdapat beberapa gaya penulisan yang berfungsi untuk 
membedakan topik dan informasi yang sedang dibicarakan. Berikut beberapa 
hal yang perlu diingat: 


1. Kata-kata yang penting akan ditulis dengan huruf tebal. 


2. Penulisan blok-blok logika akan ditulis dalam kotak, dengan font Book- 
man Old Style. Blok-blok logika yang terdapat di buku ini juga memiliki 
perbedaan informasi. Blok logika dengan bullet berwarna hitam adalah 
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blok kondisi, sedangkan yang berwarna putih adalah blok aksi. 


e Ini contoh blok kondisi (conditions) 


Oo Kalau ini contoh blok aksi (actions) 
— Terus ini contoh dari sub-event 


v Yang ini contoh aksi dari sub-event 


3. Dalam setiap bab, akan ditemui beberapa kotak dengan informasi yang 
berbeda, yaitu You Better Know, Experiments, dan Challenge Yourself. 


YOU BETTER KNOW! 


Berisi informasi tambahan tentang materi yang sedang dibahas. Bi- 
asanya berupa penjelasan teknis tambahan. 


EXPERIMENTS! 


Setelah menguasai materi yang diajarkan, pembaca dapat meng- 


Utak-atik pemrograman yang telah dibuat, untuk menambah 
pengetahuan. 


CHALLENGE YOURSELF! 


Menantang pembaca untuk menambah fitur-fitur di dalam game 
yang tidak diajarkan dalam tutorial. 


Merasa Bingung? Kirimkan Pertanyaan Anda! 


E-mail: punto.damar@ti.ukdw.ac.id 
punto.damar2@gmail.com 


Facebook fanpage : facebook.com/puntodamar 
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Bab 1 


Getting Started 
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1.1 System Reguirements 


1. 


Minimal 


OS: Windows XP Service Pack 3 
RAM 512 MB 
Prosesor 1 GHz 


Web browser yang mendukung HTML5 (Scirra merekomen- 
dasikan Google Chrome dan Mozilla Firefox) 


Driver kartu grafis terbaru 


1.2 Instalasi 


Instal Construct seperti menginstal software biasa. Jika Anda belum memi- 
likinya, Anda bisa men-download-nya di http://www.scirra.com/construct2/ 


releases/new. 

1. Jika ingin menginstalnya secara portabel, Anda cukup mengganti lokasi 
penyimpanannya ke lokasi yang diinginkan. 

2. Construct 2 dapat diinstal baik di komputer 32-bit maupun 64-bit. Set 
pengaturan ke auto-detect jika kurang yakin dengan versi komputer 
Anda. Akan tetapi, jika menginginkan instalasi portabel, ubah pe- 
ngaturan ke 32-bit. 

3. Dalam buku ini, penulisan berbasis pada Construct 2 versi 158-r2 Free 
Edition. Versi free memiliki beberapa batasan, yaitu: 

e Maksimal 100 event dalam satu project. 

e Maksimal 4 layer dalam setiap layout. 

e Tidak adanya pengelompokan folder dalam project bar. 

e Tidak memiliki fitur family. 

e Terbatas 2 efek dalam satu project. 

e Tidak dapat ekspor ke Android, iOS, Windows, Mac, dan Linux. 

e Tidak bisa dikomersialkan, akan tetapi bisa disebarluaskan sela- 
ma tidak menarik harga untuk game yang dibuat. 

- 
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1.3 Backup 


1. Masuk ke dalam menu Preferences » Backup. Dalam backup folder, 
masukkan lokasi backup yang diinginkan, ditambah frekuensinya. Anda 
juga bisa menambah lokasi backup, dan bahkan meng-upload-nya ke 
Dropbox untuk mencegah hilangnya data karena kerusakan, pencurian, 
bencana alam, dan sebagainya. 

2. 


Pindah ke tab Autosave. Enable fitur autosave untuk antisipasi jika 
lupa menyimpan data. 


Preferences 


| General | Preview | Autosave | Backup (isc | Colors | 


Auto-backup 


Keep up to | 1 backup/s) in folder when saving 


—Backup folders 


@ tis HIGHLY recommended to set up a daily backup to a Dropbox folder. 
This ensures your work is safe even in the event of catastrophes like 
hardware failure, theft, fire and foods. 


Freguency 


Location 1: | D:WevelopmentiConstruct 2Bada | ME Every 15 minutes w 
Locaton 2: | Goted jae 
Locato 3: | potuseg) (-oeo——) 


Gambar 1.1 Kotak dialog backup 
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1.4 Error Handling 


Terkadang, file .capx dapat mengalami kerusakan. Kerusakan yang sering kali 
dialami penulis adalah hilangnya skrip shader.js. Akibatnya, file tidak bisa 
dibuka kembali. Untuk mencegahnya, matikan software-software utility, 
seperti Tune-up Utilities dan sebagainya. Saat menggunakan Construct 2, 
terdapat beberapa data yang disimpan di direktori temporary pada komput- 
er. Terkadang, file yang disimpan di sana terhapus oleh software tersebut, 
sehingga file .capx menjadi corrupt. Jika sudah telanjur, maka satu-satunya 
jalan adalah menggunakan backup. 


Jika yang hilang adalah file gambar, maka kemungkinan file masih dapat dise- 
lamatkan. Timpa file yang hilang tersebut dengan file gambar yang baru pada 
lokasi penyimpanan. Jika file berupa .capx, ekstrak dahulu dengan WinZIP/ 
WinRAR, baru kemudian lakukan penimpaan. 


Di dalam update software terbaru, kemungkinan masih terdapat bug di da- 
lamnya, sehingga akan muncul kesalahan-kesalahan. Anda tidak dapat lagi 
membuka file di software versi yang lama, karena sudah disimpan di versi 
yang lebih baru, seperti yang ditunjukkan pada gambar di bawah. 


'Unable to load project” — sat 3 
Pa aa 


Could not open project 

FAN WACNUsersiPeinAppData|Locah Tempicap2P040 C1 New 
project.caproj' because it is from a newer version of Construct 2. The 
project was saved in release 172 or newer. Your current release is 139. 
Try downloading the latest version of Construct 2 to open this project. 


Gambar 1.2 Contoh pesan error tidak bisa membuka file, karena file disimpan 
dengan versi software yang lebih baru 


Membuka file di versi yang lama, Anda perlu melakukan perubahan pada file 
New project.caproj (jika file berupa .capx, lakukan ekstrak dengan WinRAR, 
atau save as project untuk mendapatkan file ini). Buka file itu dengan Notepad. 
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Setelah itu, cari baris yang bertuliskan “«saved-with-version2xxx00x/saved- 
with-version2” (biasanya pada baris 11), ganti bagian xxx dengan versi 
software yang diinginkan, lalu save. 


(author»x«/author» 
Kauthor-email:« /author-email» 
Kauthor-website»http://x/author-website» 


Kapp-id»com.mycompany.myapp«/app-id» 
unigue-id»1@pvkhrrlowc«/unigue-id» 
ksaved-with-version»13906x/saved-with-version» 


Gambar 1.3 File ingin dibuka dengan versi 139 
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Bab 2 


Manual 


Tujuan: 


1. 


2 
3. 
4 


Terbiasa dengan interface Construct 2. 
Mengetahui kegunaan dari masing-masing behavior. 
Mengetahui cara penulisan parameter. 


Mengetahui kegunaan expressions serta cara penulisannya. 
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2.1 


Version 


Interface 


Construct 2 (ree edition) - Game 


TI v Mx Space Blaster" 
" Har Layouts 
Bi Safari Audio Title 
B Title 
" Game 


Space Blaster 


Descripti.. Space shoot. v Hr Event sheets 
ID Game events 
Author Scirra Safari Audio Title eve 
Email Uibag 
ject types 
Website sala 
Backgrounds 
" Project settings » Ba Game 
First layo... (default) » Bm Title 
Use load... No #) Audio 
Pixel rou... Off & Browser 
» Window... 720, B3 Keyboard 


" Configuration Set 


Preview .. 
Fullscree. 
Use iOS 
Hide ad. 
Enable 
Sampling 
Loader s. 
Pause on. 
Clear ba. 
More inform. 


AsRocketButton 
safarTitle 
5 ext 

“ouch 

v Hi Families 
» isi Enemies 

p ir Sounds 

» Hr Music 

v Im Files 


(defau! 
Letterbox sc. 


Linear 


Progress ba. 
No 


N 
ckgrounds — Mffiy Game au: Ah RocketButton 


& @ Background 


Gambar 2.1 Interface Construct 2 


Menu bar & ribbon tabs 


Na 


Gambar 2.2 Ouick access toolbar 


Tampilan menu dalam Construct 2 memakai bentuk ribbon. Tombol 
berbentuk roda gigi lambang Scirra akan menampilkan drop-down rib- 
bon, yang di dalamnya berisi perintah-perintah standar seperti New, 
Open, dan Save (bentuknya berbeda-beda, bergantung pada versi en- 
gine). Di sebelahnya, terdapat guick access toolbar yang berisi empat 
buah perintah yang paling sering digunakan. Anda dapat melakukan 
customize untuk menambah maupun mengurangi perintah dalam tool- 
bar ini. 


Layout 


Layout adalah tempat bekerja. Anda bisa menempatkan objek, mende- 
sain level, dan sebagainya. Tampilan layout dibagi menjadi dua, yaitu 
layout dan window size. Layout adalah seluruh lembar kerja berwarna 
putih, sedangkan window size merepresentasikan ukuran layar yang 
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dipakai. Batas antara window dan layout ditandai dengan adanya garis 
putus-putus berwarna biru. Ukuran layout dan window size dapat di- 
atur sesuai keinginan dengan melakukan konfigurasi pada properties 
bar. 


3. Tab 


Gambar 2.3 Tabs 


Tab berfungsi untuk mengganti layout maupun event sheet yang ingin 
dikerjakan. Anda dapat melakukan drag untuk mengatur urutannya. 
Layout yang aktif ditandai dengan munculnya ikon close di bagian 
pojok kanannya. Untuk menutup tab, tinggal klik tanda close tersebut, 
sedangkan untuk membukanya kembali, dapat dilakukan dengan 
mengaksesnya di folder event sheets dalam project bar. 


4. Properties bar 


» About 
" Project settings 
- Window Size 720, 960 


Configuration Settings| 
Preview bro... (default) 
Fullscreen in... Letterbox scale 
Use iOS reti... No 

Hide addres... No 

Enable Web... On 

Sampling Linear 

Loader style Progress bar &... 
Pause on un... No 


Clear backg... No 
More informati... Help 


Gambar 2.4 Properties bar 
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10 


Properties bar berisi daftar pengaturan objek yang dapat Anda ubah 
sesuai kebutuhan. Isi dari properties bar dapat berbeda-beda, bergan- 
tung pada objek apa yang dipilih. Opsi pengaturan ditunjukkan dalam 
kolom kiri, sedangkan di kolom kanan dapat diisikan nilai sesuai yang 
diinginkan. Jangan lupa untuk melihat property descriptions pada ba- 
gian bawah kolom untuk mendapatkan informasi tambahan mengenai 
fungsi properti tersebut. 


Project bar 


v fr Space Blaster” - 
v fx Layouts | 
Safari Audio Title 

MI) Title 
WM) Game 
v ih Event sheets 
Game events 
J Safari Audio Title events 
Title events 
v fx Object types 
p fk Backgrounds 
v Ky Game 
» Kay Title 
#)) Audio 
& Browser 
Ed Keyboard 
Ab, RocketButton 
FT! SafariTitle 
IT) Text 
W) Touch 
v jav Families - 


Gambar 2.5 Project bar 


ii 


Project bar memberi gambaran umum tentang segala hal dalam proyek 
game yang dibuat, seperti jumlah event, layout, dan objek-objek yang 
dimiliki. Penambahan objek dapat dilakukan dengan cara klik kanan 
pada Object types » Insert new object. Begitu pula untuk penambah- 
an event sheet, klik kanan pada folder Event sheets » Add event sheet. 
Karena menggunakan versi free, tidak semua fitur project bar dapat 
dinikmati, seperti yang telah dijelaskan pada Subbab 1.2. 
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Ketika project bar dipilih, maka project properties akan muncul pada 
properties bar. Berikut pengaturan yang sering digunakan: 


e First layout: layout yang pertama kali akan dibuka ketika game 
dimainkan. 


e Window size: ukuran layar. 


e Preview browser: memilih browser mana yang akan dipakai un- 
tuk melakukan playtest. 


e  Fullscreen in browser: teknik-teknik penampilan layout dalam 
game. 


e Loader style: mengganti logo saat proses loading. 


6. Object bar 


Objects 


All 'Garne' objects 


Ha 
Mr Bzckarounas ir Same PL /A, rocketButton HT iTot 


Gambar 2.6 Object bar 


Object bar berfungsi menunjukkan objek secara spesifik, berdasarkan 
isi suatu folder dalam project bar. Drag and drop dapat dilakukan jika 
ingin memasukkan objek ke dalam layout. 


7. Layers bar 


& & Same 


& @ Background 0 
Gambar 2.7 Layers bar 
- 
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Layers bar digunakan untuk menambah, mengedit, maupun mengha- 
pus suatu layer dalam layout. Layer berperan besar untuk menciptakan 
“kedalaman” di game yang dibuat. Makin besar nilai layer, makin besar 
pula prioritas objek dalam layout tersebut. Misalnya jika kita menaruh 
objek dalam layer UI, objek tersebut akan menutupi objek lain dalam 
layout yang lebih kecil nilainya. Dalam versi free, pemberian layer ha- 
nya dibatasi sebanyak empat buah saja. 


Dalam menggunakan layers bar, perlu memperhatikan kegunaan ti- 
ap-tiap fungsi ikonnya. Ikon berbentuk plus dan trash berfungsi untuk 
menambah dan menghapus layer. Kemudian yang ikon berbentuk mata 
berguna untuk men-disable layout hingga menjadi tak terlihat. Sedang- 
kan ikon bergambar gembok untuk “mengunci” objek-objek di dalam 
layer untuk mencegah perubahan-perubahan yang tidak disengaja. 


2.2 Events 


Construct 2 dapat mendefinisikan cara kerja game dengan memakai sistem 
blok logika, sehingga tidak memerlukan pengetahuan scripting maupun pro- 
gramming. Hal inilah yang membuat engine ini mudah dan cepat dikuasai 
banyak orang. Proses eksekusi suatu event menggunakan logika sebab akibat 
atau “jika-maka”. Jika suatu kondisi dipenuhi, maka suatu perintah akan di- 
jalankan. 


Sub-event adalah “anak” dari sebuah event lain. Ketika kondisi dari event in- 
duk terpenuhi, maka sub-event juga akan dijalankan. Akan tetapi, walaupun 
kondisi sub-event terpenuhi, namun kondisi event induk belum terpenuhi, 
maka perintah sub-event tidak akan dijalankan. Perintah yang dijalankan sub- 
event tidak bersamaan dengan main-event, namun yang main-event dulu 
yang dijalankan. Setelah semua perintah dalam main-event dilakukan, baru 
perintah dalam sub-event dieksekusi. 
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